<template>
  <div class="container" :class="{'background1' : pending_income_dz_select === 1, 'background2' : pending_income_dz_select === 2}">
    <div class="main-box" :class="{'background2_top' : pending_income_dz_select === 2}">
      <span :class="is_price? 'price':'price2'">{{price}}元</span>
    </div>
  </div>
</template>

<script>
import { getPendingIncomePrice } from '@/api/dz/dzApi'

export default {
  data() {
    return {
      price: 0.00,
      is_price: true,
      pending_income_dz_select: 1 // 当前选择的背景图
    }
  },
  methods: {
    Jump(url, data) {
      this.$JumpPath(this, url, data, 0)
    }
  },
  created() {
    getPendingIncomePrice({}).then(res => {
      this.pending_income_dz_select = res.data.pending_income_dz_select || 1
      this.price = res.data.price || 0.00
      const p = this.price.toString().split('.')
      const len = p[0] ? p[0].length : 0
      if (len >= 7) {
        this.is_price = false
      }
    })
  }
}
</script>
<style lang="scss">
.app-wrapper.h100 {
  background: #020B1E;
  padding: 0;
}
.container {
  background-size: 100% 100%;
  background-repeat: no-repeat;
  width: 100vw;
  min-height: 100vh;
  background-color: #020B1E;
  font-size: 28px;
  position: relative;
  font-weight: 500;
  .main-box {
    width: 100%;
    // height: ;
    text-align: center;
    position: absolute;
    top: 67%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    .price{
      font-size: 85px;
      color: #f00d3a;
      font-weight: bold;
    }
    .price2{
      font-size: 80px;
      color: #f00d3a;
      font-weight: bold;
    }
  }
}
.background1 {
  background-image: url(https://wifenxiao.oss-cn-hangzhou.aliyuncs.com/h5-wfx/images/kehu_tg_tu.jpg);
}
.background2 {
  background-image: url(https://wifenxiao.oss-cn-hangzhou.aliyuncs.com/h5-wfx/images/kehu_tg_tu2.jpg);
}
.background2_top {
  top: 75%!important;
}
</style>
